.middle  ul{
    width: 80%;

    margin:  20px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.middle ul li {
    border: 1px solid purple;
    list-style: none;
    height: 300px;
    width: 25%;
    margin: 10px 20px;
    background-color: rgb(220, 219, 219);
    text-align: center;
}
.middle ul li:hover{
    background-color: yellow;
    cursor: pointer;
}
.middle ul li h1 {
    color: red;
}

.middle ul li h2 {
    color: deeppink;
}